<script setup lang="ts">
import { computed, ref } from 'vue'
import { NModal, NForm, NFormItem, NInput, NRadioGroup, NSpace, NRadio } from 'naive-ui'
const authFormData = ref({
  inType: 'header',
  authType: 'basic',
  key: '',
  value: ''
})

interface Props {
  show: boolean
}

const props = defineProps<Props>()

const emit = defineEmits(['update:show', 'submit'])

const showAuthModal = computed({
  get: () => props.show,
  set: (value: boolean) => {
    emit('update:show', value)
  }
})

const handleAuthModalSubmit = () => {
  emit('submit', authFormData.value)
}

const rules = {
  key: {
    required: true,
    trigger: ['input', 'blur'],
    validator() {
      if (authFormData.value.key) {
        return true
      } else {
        return new Error('请输入 Header Key')
      }
    }
  },
  value: {
    required: true,
    trigger: ['input', 'blur'],
    validator() {
      if (authFormData.value.value) {
        return true
      } else {
        return new Error('请输入 Header Value')
      }
    }
  }
}
</script>
<template>
  <n-modal
    v-model:show="showAuthModal"
    preset="card"
    title="授权配置"
    style="width: 600px"
    class="rounded-3xl"
  >
    <n-form label-placement="top" label-width="auto" :rules="rules">
      <n-form-item label="In & 位置" path="inType">
        <n-radio-group v-model:value="authFormData.inType">
          <n-space>
            <n-radio-button value="header">Header</n-radio-button>
            <n-radio-button value="query">Query</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="AuthType & 类型" path="authType">
        <n-radio-group v-model:value="authFormData.authType">
          <n-space>
            <n-radio-button value="basic">Basic</n-radio-button>
            <n-radio-button value="bearer">Bearer</n-radio-button>
            <n-radio-button value="custom">自定义</n-radio-button>
          </n-space>
        </n-radio-group>
      </n-form-item>
      <n-form-item label="Header Key & 请求头键" path="key">
        <n-input v-model:value="authFormData.key" placeholder="输入 Header Key" />
      </n-form-item>
      <n-form-item label="Token & 请求头值" path="value">
        <n-input v-model:value="authFormData.value" type="textarea" placeholder="Token" />
      </n-form-item>
    </n-form>

    <template #footer>
      <div class="flex justify-end">
        <n-button class="mr-3" @click="showAuthModal = false">取消</n-button>
        <n-button type="primary" @click="handleAuthModalSubmit">确定</n-button>
      </div>
    </template>
  </n-modal>
</template>
